{{template "header" .}}
<style>
    body {
        height: 100vh;
        background-color: #c8d6e5;
        width: 100vw;
    }

    .more-users-ul li {
        list-style: none;
        padding: 15px;
        border: 1px solid #ccc;
        box-shadow: 0 0 3px #aaa;
        margin: 15px;
        border-radius: 4px;
        background-color: #fff;
        font-size: 16px;
        position: relative;
        line-height: 20px;
        min-height: 20px;
    }

    .more-users-ul li i {
        font-size: 14px;
        color: #999
    }

    .more-users-ul li .iconfont {
        position: absolute;
        right: 5px;
        color: #666
    }

    .more-users-ul li .icon-arrowdown {
        display: none
    }

    .more-users-ul li.active {
        box-shadow: 0 0 10px #666;
    }

    .more-users-ul li.active .icon-arrow-right-bold {
        display: none;
    }

    .more-users-ul li.active .icon-arrowdown {
        display: inline-block
    }

    fieldset {
        font-size: 12px;
        margin-top: 25px;
        border: 1px solid #ccc;
        position: relative
    }

    fieldset:before {
        content: '';
        width: 100%;
        height: 0;
        overflow: hidden;
        border-top: 1px dashed #ccc;
        display: inline-block;
        position: absolute;
        top: -30px;
        left: 0
    }

    fieldset input {
        padding: 7px;
        font-size: 16px;
        width: calc(100% - 20px);
        border: none;
        outline: none;
        color: cornflowerblue
    }
</style>
<div style="margin-top:50px;text-align: center;">存在重名用户，请选择正确用户登录</div>
<form action="/m/login" method="post" onsubmit="onSubmit(event)">
    <input type="hidden" name="password" value="{{.password}}">
    <input type="hidden" name="id" id="f-id">
    <ul class="more-users-ul">
        {{range .users}}
        <li data-id="{{.id}}">
            <span class="name">{{.name}}</span>
            <i>(父：{{.parent_name}})</i>
            <span class="iconfont icon-arrow-right-bold"></span>
            <span class="iconfont icon-arrowdown"></span>
        </li>
        {{end}}
    </ul>
    <div style="padding:15px;">
        <button type="submit"
            style="border:none;background-color: dodgerblue;width:100%;height:45px;border-radius: 4px;font-size: 16px;color:#fff;">重命名并登录</button>
    </div>
</form>
</div>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        var lis = document.querySelectorAll('.more-users-ul li');
        lis.forEach(li => {
            li.addEventListener('click', ev => {
                if (li.classList.contains('active')) return;
                lis.forEach(o => {
                    o.classList.remove('active');
                    try {
                        o.removeChild(o.querySelector('fieldset'))
                    } catch (error) {

                    }
                })
                li.classList.add('active');
                var fieldset = document.createElement('fieldset');
                var legend = document.createElement('legend');
                legend.innerText = '重命名';
                fieldset.appendChild(legend);
                var input = document.createElement('input');
                input.type = 'text';
                input.name = 'newName';
                var oldName = li.querySelector('.name').innerText
                input.value = oldName;
                fieldset.appendChild(input);
                li.appendChild(fieldset);
                input.focus();
                document.getElementById('f-id').value = li.dataset.id;
            })
        })
    })

    function onSubmit(ev){
        ev.preventDefault();
        var form = ev.target;
        if(!form.newName){
            alert('请选择用户');
            return;
        }
        var id = form.id.value;
        var newName = form.newName.value;
        var password = form.password.value;
        ajax('/m/rename','post',{id,newName,password}).then(()=>{
            form.submit();
        }).catch(e=>{
            alert(e);
        })
    }
</script>
</body>

</html>